
<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="logo">场地管理系统</view>
      <view class="header-right">
        <uni-button type="primary" size="mini" @click="showPublishModal">发布公告</uni-button>
        <uni-text class="admin-info">管理员：张三</uni-text>
        <uni-button type="default" size="mini" @click="handleLogout">退出</uni-button>
      </view>
    </view>

    <view class="main-content">
      <!-- 左侧功能区 -->
      <view class="sidebar">
        <uni-button type="primary" class="add-court-btn" @click="showAddCourtModal">
          <uni-icons type="plus" size="16" color="#FFFFFF"></uni-icons>
          添加场地
        </uni-button>

        <view class="notice-board">
          <view class="notice-title">最新公告</view>
          <view class="notice-content">
            <view class="notice-item">
              <uni-text class="notice-text">2025年3月场地维护通知</uni-text>
              <uni-text class="notice-time">2025-03-11</uni-text>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧场地列表 -->
      <view class="court-list">
        <view class="court-table">
          <view class="table-header">
            <view class="th">场地名称</view>
            <view class="th">场地费用</view>
            <view class="th">场地状态</view>
            <view class="th">操作</view>
          </view>
          <view class="table-body">
            <view v-for="court in courts" :key="court.id" class="table-row">
              <view class="td name cursor-pointer" @click="showCourtDetail(court)">{{ court.name }}</view>
              <view class="td">¥{{ court.price }}/小时</view>
              <view class="td">
                <view :class="['status-tag', court.status]">{{ getStatusText(court.status) }}</view>
              </view>
              <view class="td operations">
                <uni-button type="primary" size="mini" @click="showBookingModal(court)" :disabled="court.status !== 'free'">预订</uni-button>
                <uni-button type="warning" size="mini" @click="showReserveModal(court)" :disabled="court.status !== 'free'">预留</uni-button>
                <uni-button :type="court.timing ? 'error' : 'success'" size="mini" @click="handleTiming(court)" :disabled="court.status !== 'free' && !court.timing">
                  {{ court.timing ? '结束计时' : '开始计时' }}
                </uni-button>
                <uni-button type="primary" size="mini" @click="showSettlementModal(court)" :disabled="!court.timing">结算</uni-button>
                <uni-icons type="trash" size="24" color="#dd524d" @click="handleDelete(court)" class="cursor-pointer"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 预订弹窗 -->
    <uni-popup ref="bookingPopup" type="dialog">
      <uni-popup-dialog mode="input" title="场地预订" :before-close="true" @confirm="handleBookingConfirm" @close="closeBookingModal">
        <view class="booking-form">
          <uni-datetime-picker type="date" :value="bookingDate" @change="onDateChange" />
          <view class="time-select">
            <uni-data-select v-model="startTime" :localdata="timeOptions" placeholder="开始时间"></uni-data-select>
            <uni-text>至</uni-text>
            <uni-data-select v-model="endTime" :localdata="timeOptions" placeholder="结束时间"></uni-data-select>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>

    <!-- 结算弹窗 -->
    <uni-popup ref="settlementPopup" type="dialog">
      <uni-popup-dialog mode="input" title="场地结算" :before-close="true" @confirm="handleSettlementConfirm" @close="closeSettlementModal">
        <view class="settlement-form">
          <uni-easyinput v-model="cardNumber" placeholder="请输入一卡通号码"></uni-easyinput>
          <view class="fee-display">
            <uni-text>使用时长：{{ currentCourt?.usageTime || 0 }}小时</uni-text>
            <uni-text>应付金额：¥{{ calculateFee() }}</uni-text>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>

    <!-- 场地详情弹窗 -->
    <uni-popup ref="courtDetailPopup" type="dialog">
      <uni-popup-dialog mode="base" title="场地详情" :before-close="true" @close="closeCourtDetailModal">
        <view class="court-detail">
          <view class="detail-item">
            <uni-text class="label">场地名称：</uni-text>
            <uni-text>{{ currentCourt?.name }}</uni-text>
          </view>
          <view class="detail-item">
            <uni-text class="label">收费标准：</uni-text>
            <uni-text>¥{{ currentCourt?.price }}/小时</uni-text>
          </view>
          <view class="detail-item">
            <uni-text class="label">场地状态：</uni-text>
            <view :class="['status-tag', currentCourt?.status]">{{ getStatusText(currentCourt?.status) }}</view>
          </view>
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

interface Court {
  id: number;
  name: string;
  price: number;
  status: 'free' | 'booked' | 'maintenance';
  timing?: boolean;
  usageTime?: number;
}

const courts = ref<Court[]>([
  { id: 1, name: '羽毛球场地1', price: 50, status: 'free' },
  { id: 2, name: '羽毛球场地2', price: 50, status: 'booked' },
  { id: 3, name: '羽毛球场地3', price: 50, status: 'maintenance' },
]);

const bookingPopup = ref();
const settlementPopup = ref();
const courtDetailPopup = ref();
const currentCourt = ref<Court | null>(null);
const bookingDate = ref(new Date().toISOString().split('T')[0]);
const startTime = ref('');
const endTime = ref('');
const cardNumber = ref('');

const timeOptions = computed(() => {
  const options = [];
  for (let i = 8; i <= 22; i++) {
    options.push({
      value: i,
      text: `${i}:00`
    });
  }
  return options;
});

const getStatusText = (status: string) => {
  const statusMap = {
    free: '空闲',
    booked: '已预订',
    maintenance: '维护中'
  };
  return statusMap[status as keyof typeof statusMap];
};

const showPublishModal = () => {
  // 实现发布公告逻辑
};

const handleLogout = () => {
  // 实现退出登录逻辑
};

const showAddCourtModal = () => {
  // 实现添加场地逻辑
};

const showBookingModal = (court: Court) => {
  currentCourt.value = court;
  bookingPopup.value.open();
};

const showReserveModal = (court: Court) => {
  // 实现预留场地逻辑
};

const handleTiming = (court: Court) => {
  const index = courts.value.findIndex(c => c.id === court.id);
  if (index !== -1) {
    courts.value[index].timing = !courts.value[index].timing;
    if (courts.value[index].timing) {
      courts.value[index].usageTime = 0;
    }
  }
};

const showSettlementModal = (court: Court) => {
  currentCourt.value = court;
  settlementPopup.value.open();
};

const handleDelete = (court: Court) => {
  // 实现删除场地逻辑
};

const showCourtDetail = (court: Court) => {
  currentCourt.value = court;
  courtDetailPopup.value.open();
};

const calculateFee = () => {
  if (!currentCourt.value || !currentCourt.value.usageTime) return 0;
  return currentCourt.value.price * currentCourt.value.usageTime;
};

const handleBookingConfirm = () => {
  bookingPopup.value.close();
};

const closeBookingModal = () => {
  currentCourt.value = null;
  startTime.value = '';
  endTime.value = '';
};

const handleSettlementConfirm = () => {
  settlementPopup.value.close();
};

const closeSettlementModal = () => {
  currentCourt.value = null;
  cardNumber.value = '';
};

const closeCourtDetailModal = () => {
  currentCourt.value = null;
};

const onDateChange = (e: string) => {
  bookingDate.value = e;
};
</script>

<style>
page {
  height: 100%;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.admin-info {
  font-size: 14px;
  color: #666666;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 32rpx;
  gap: 32rpx;
  overflow: hidden;
}

.sidebar {
  width: 300rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  flex-shrink: 0;
}

.add-court-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.notice-board {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24rpx;
}

.notice-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
}

.notice-item {
  padding: 16rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.notice-text {
  font-size: 14px;
  color: #666666;
  display: block;
  margin-bottom: 8rpx;
}

.notice-time {
  font-size: 12px;
  color: #999999;
}

.court-list {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24rpx;
  overflow: auto;
}

.court-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  padding: 16rpx 0;
}

.th {
  flex: 1;
  text-align: center;
  font-weight: bold;
  color: #333333;
  font-size: 14px;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 24rpx 0;
}

.td {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666666;
}

.operations {
  display: flex;
  gap: 16rpx;
  justify-content: center;
  align-items: center;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 4px;
  font-size: 12px;
}

.free {
  background-color: #e8f5e9;
  color: #4caf50;
}

.booked {
  background-color: #ffebee;
  color: #f44336;
}

.maintenance {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.booking-form,
.settlement-form {
  padding: 24rpx;
}

.time-select {
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.fee-display {
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.court-detail {
  padding: 24rpx;
}

.detail-item {
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
}

.label {
  color: #666666;
  margin-right: 8rpx;
}

.cursor-pointer {
  cursor: pointer;
}
</style>

